<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
// import { getbanner1, foodshop } from '../../api/home'
const router = useRouter()
function onClickLeft() {
    router.back()
}
</script>


<template>
    <div class="box">
        <van-nav-bar title="咖档案" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="content">

            <div class="top"></div>
            <div class="top1">

                <h2>咖档案</h2>
                <van-cell-group>
                    <van-cell title="园区资料" />
                </van-cell-group>

                <div class="top2">
                    <div class="top3">
                        <p>园区面积</p>
                        <p>185763m</p>
                    </div>
                    <div class="top3">
                        <p>最大游客量</p>
                        <p>6800人</p>
                    </div>


                    <div class="top3">
                        <p>娱乐项目</p>
                        <p>289</p>
                    </div>
                    <div class="top3">
                        <p>特色景点</p>
                        <p>132</p>
                    </div>
                </div>
            </div>


            <van-cell-group>
                <van-cell title="园区简介" />
            </van-cell-group>
            <div class="top4">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 欢迎您来到主题乐园，参加美食街活动。主题乐园拥有
                1832m2大型室内游玩场所
            </div>
            <div class="top5">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                女主题咖乐园融参与性、观赏性、娱乐性、趣味性于-体，绝对的网红打卡圣地文致力打造成为中国最新、最具个性魅力的主题乐园，是主题咖度假区的重要组成部分。它根据天然优美的海岸线，自然天成的山水，巧妙地将多种精彩刺激的高科技游乐设备与地中海风格建筑相融合，形成了热情奔放的幸运大道区、惊险刺激的冒险从林区、神秘诡异的海盗城堡区、梦幻童话的美人鱼湖区、激情四溢的神秘岛区和碧海银滩的加勒比海岸区等六大主题区域，多种高科技游乐项目，带你飞跃翻腾。
            </div>
            <div class="top6">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                主题咖拥有亚洲第一的”E型战车";中国第一座”疯狂逃生船”、"云雪飞车”、"垂直极限”等高科技的大型游乐设施、配合多项中小型游乐项目和近10种充满异国风情的表演，让游客在互动中享受刺激与欢乐。
            </div>
            <van-cell-group>
                <van-cell title="园区大事记" />
            </van-cell-group>

            <van-steps direction="vertical" :active="5">
                <van-step>
                    <div class="top7">
                        <h3>主题项目成立</h3>
                        <p>1990年</p>
                        <p>由7位创始人经过共同推敲,主题咖项目于90年成立,项目选址于: 广东省广州市白云区X-xxXCX</p>
                    </div>
                </van-step>
                <van-step>
                    <div class="top7">
                        <h3>开源盛典</h3>
                        <p>1993年年</p>
                        <p>历时3年的工程建造,主题咖乐园正式面向群众开放,首日入园游客突破1400人</p>
                    </div>
                </van-step>
                <van-step>
                    <div class="top7">
                        <h3>千禧年大改造</h3>
                        <p>2000年</p>
                        <p>长达7年的服务,为了迎接新世纪,主题咖于千禧年提出改造工程,届时将打造娱乐与景色一体的主题产业</p>
                    </div>
                </van-step>
                <van-step>
                    <div class="top7">
                        <h3>动漫咖</h3>
                        <p>2008年</p>
                        <p>青年群体已成常态,为了迎合更大的市场及口味,主题咖与动漫业巨头长达2年的交涉,于08年加造动漫主题咖</p>
                    </div>
                </van-step>
                <van-step>
                    <div class="top7">
                        <h3>至今</h3>
                        <p>2023年</p>
                        <p>截止2020年,主题咖已成为业界标杆,美好瞬间只与你一同分享</p>
                    </div>
                </van-step>

            </van-steps>
        </div>



    </div>
</template>


<style scoped>
.top {
    width: 100%;
    height: 2.5rem;
    background: url(https://img1.baidu.com/it/u=4049022245,514596079&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1686848400&t=16eb51d22e5eb25ce53b21ba4377eaa0) no-repeat 100%/cover;
    border-radius: .2rem;
}

h2 {
    width: 100%;
    text-align: center;
    margin-top: .2rem;
    margin-bottom: .2rem;
}

.top2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

}

.top3 {
    width: 45%;
    background-color: rgba(10, 14, 14, 0.047);
    height: .5rem;
    margin-bottom: .2rem;
    text-align: center;
    line-height: .25rem;
    border-radius: .1rem;
}

.top4 {
    line-height: .25rem;
    padding: 0 .2rem;
    box-sizing: border-box;
    margin-bottom: .2rem;
}

.top5 {
    line-height: .25rem;
    padding: 0 .2rem;
    box-sizing: border-box;
    margin-bottom: .2rem;

}

.top5 {
    line-height: .25rem;
    padding: 0 .2rem;
    box-sizing: border-box;
    margin-bottom: .2rem;

}

.top6 {

    line-height: .25rem;
    padding: 0 .2rem;
    box-sizing: border-box;
    margin-bottom: .2rem;


}

.top7 {
    line-height: .25rem;
}
</style>